<template>
    <div>
        
        <transition name="fadein" :duration={enter:4000,leave:3000} >
            <p v-show='isShow' ref="test"></p>
        </transition>

        <button @click="showAnima">点击我1</button>

    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
               isShow : false 
            }
        },
        methods : {
            showAnima(){
                var _this = this;
                setTimeout(function(){
                    _this.isShow=!_this.isShow
                },100)
            },
        }
        
    }
</script>

<style scoped>
    p{height: 20px;background-color: #ddd}
    .fadein-enter{
        background-color: red;  
    }
    .fadein-enter-active {
        transition: all 2s linear;
    }
    .fadein-enter-to{
        background-color: green;
    }
    .fadein-leave{
        background-color: yellow;
    }
    .fadein-leave-active {
        transition: all 2s linear;
    }
    .fadein-leave-to{
        background-color: blue;
    }
</style>
